<div style="height: 100%;display: flex;flex-direction: row;justify-content: space-between;min-width: 1900px">
  <!--  基础可选组件-->
  <nz-card class="baseComponent">
    <div style="margin-bottom: 24px">
      <h1>基本信息</h1>
      <div>内部标题：{{componentBaseData['title']}}</div>
      <div>外部标题：{{componentBaseData['outsideTitle']}}</div>
      <div>适用用户：{{USERTYPE[componentBaseData['userType']]}}</div>
      <div>生效时间：{{componentBaseData['takeEffectTime']}}</div>
      <div style="margin: 12px 0">
        <button nz-button nzType="primary" (click)="saveDecoration()">保存</button>
      </div>
    </div>
    <div>
      <h1>图片组件</h1>
      <div cdkDropList [cdkDropListConnectedTo]="[doneList]" cdkDropListOrientation="horizontal" class="example-list"
           (cdkDropListDropped)="dropBaseComponent($event)">

        <span class="componentItem" [cdkDragData]="{type: 'images'}" cdkDrag>
          <span nz-icon nzType="file-image" nzTheme="outline"></span>
          <div>单行图片</div>
        </span>

        <span class="componentItem" [cdkDragData]="{type: 'loopImages'}" cdkDrag>
          <span nz-icon nzType="ellipsis" nzTheme="outline"></span>
          <div>轮播图</div>
        </span>

      </div>
    </div>
    <div style="margin-top: 12px">
      <h1>商品组件</h1>
      <div cdkDropList [cdkDropListConnectedTo]="[doneList]" cdkDropListOrientation="horizontal" class="example-list"
           (cdkDropListDropped)="dropBaseComponent($event)">

        <span class="componentItem" [cdkDragData]="{type: 'goods'}" cdkDrag>
          <span nz-icon nzType="shopping" nzTheme="outline"></span>
          <div>普通商品</div>
        </span>

        <span class="componentItem" [cdkDragData]="{type: 'usedGoods'}" cdkDrag>
          <span nz-icon nzType="sync" nzTheme="outline"></span>
          <div>二手商品</div>
        </span>

      </div>
    </div>
    <div style="margin-top: 12px">
      <h1>分组组件</h1>
      <div cdkDropList [cdkDropListConnectedTo]="[doneList]" cdkDropListOrientation="horizontal" class="example-list"
           (cdkDropListDropped)="dropBaseComponent($event)">

        <span class="componentItem" [cdkDragData]="{type: 'topTab'}" cdkDrag>
          <span nz-icon nzType="aim" nzTheme="outline"></span>
          <div>顶部TAB</div>
        </span>

        <span class="componentItem" [cdkDragData]="{type: 'bottomTab'}" cdkDrag>
          <span nz-icon nzType="home" nzTheme="outline"></span>
          <div>底部TAB</div>
        </span>

      </div>
    </div>
  </nz-card>
  <!--  组件列表-->
  <nz-card style="height: 100%;width: 600px;position: relative">
    <div
      class="componentDropList"
      cdkDropList
      #doneList="cdkDropList"
      [cdkDropListData]="components"
      (cdkDropListDropped)="drop($event)">
      <div *ngFor="let item of components;let index=index" (dblclick)="showEditComponent(item,index)"
           [ngStyle]="{marginTop: item.marginTop+'px',marginBottom: item.marginBottom+'px'}"
           [cdkDragDisabled]="item.type==='bottomTab'" cdkDragBoundary=".componentDropList"
           cdkDrag>
        <div *ngIf="!['bottomTab','images','loopImages'].includes(item.type)" class="areaItem"
             [ngStyle]="{borderColor:  item.name===this.componentData.name?'#1890ff':'#00000033'}" title="双击可编辑"
             style="cursor: move">
          <span style="cursor: move;background: white;position: absolute;left: 8px;top: 8px;line-height: 16px">{{getComponentName(item.type)}}：{{item.name || '未命名'}}</span>
          <button nzSize="small" nzDanger nz-button nzType="default" style="position: absolute;top: 8px;right: 8px"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除吗"
                  (nzOnConfirm)="removeComponent(index)"
                  nzPopconfirmPlacement="left"><i nz-icon nzType="delete"></i></button>
        </div>

        <div *ngIf="item.type==='images'||item.type==='loopImages'" class="areaItem"
             [ngStyle]="{borderColor:  item.name===this.componentData.name?'#1890ff':'#00000033'}" title="双击可编辑"
             style="cursor: move;">
          <img *ngIf="item.content.length" [src]="item.content[0]['image']" style="max-height: 116px;max-width: 550px;top: 1px;position: absolute;left: 1px;">
          <span style="cursor: move;background: white;position: absolute;left: 8px;top: 8px;line-height: 16px">{{getComponentName(item.type)}}：{{item.name || '未命名'}}</span>
          <button nzSize="small" nzDanger nz-button nzType="default" style="position: absolute;top: 8px;right: 8px"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除吗"
                  (nzOnConfirm)="removeComponent(index)"
                  nzPopconfirmPlacement="left"><i nz-icon nzType="delete"></i></button>
        </div>

        <div *ngIf="item.type==='bottomTab'" title="双击可编辑" class="areaItem"
             [ngStyle]="{borderColor: item.name===this.componentData.name?'#1890ff':'#00000033'}"
             style="position: absolute;bottom: 0;width: 550px">
          <span style="background: white;position: absolute;left: 8px;top: 8px;line-height: 16px">底部Tab：{{item.name || '未命名'}}</span>
          <button nzSize="small" nzDanger nz-button nzType="default" style="position: absolute;top: 8px;right: 8px"
                  nz-popconfirm
                  nzPopconfirmTitle="确认要删除吗"
                  (nzOnConfirm)="removeComponent(index)"
                  nzPopconfirmPlacement="left"><i nz-icon nzType="delete"></i></button>
        </div>
      </div>
    </div>
  </nz-card>
  <!--  组件编辑-->
  <nz-card style="height: 100%;width: 600px">
    <button nzSize="small" nzDanger nz-button nzType="default"
            *ngIf="componentData?.type"
            style="position: absolute;top: 8px;right: 8px"
            (click)="closeComponent()"><i nz-icon nzType="close"></i></button>
    <div [ngSwitch]="componentData.type">
      <app-decoration-images [componentData]="componentData" (save)="modifyComponent($event)" (closeComponent)="closeComponent()"
                             *ngSwitchCase="'images'"></app-decoration-images>
      <app-decoration-loop-images [componentData]="componentData" (save)="modifyComponent($event)" (closeComponent)="closeComponent()"
                                  *ngSwitchCase="'loopImages'"></app-decoration-loop-images>
      <app-decoration-goods [componentData]="componentData" (save)="modifyComponent($event)" (closeComponent)="closeComponent()"
                            *ngSwitchCase="'goods'"></app-decoration-goods>
      <app-decoration-used-goods [componentData]="componentData" (save)="modifyComponent($event)" (closeComponent)="closeComponent()"
                                 *ngSwitchCase="'usedGoods'"></app-decoration-used-goods>
      <app-decoration-top-tab [componentsOptions]="componentsOptions" [componentData]="componentData"
                              (save)="modifyComponent($event)" (closeComponent)="closeComponent()" *ngSwitchCase="'topTab'"></app-decoration-top-tab>
      <app-decoration-bottom-tab [componentData]="componentData" (save)="modifyComponent($event)" (closeComponent)="closeComponent()"
                                 *ngSwitchCase="'bottomTab'"></app-decoration-bottom-tab>
    </div>
  </nz-card>
</div>
